<template>
    <el-select v-model="treeName" multiple clearable @change="selectChange">
        <el-option :value="[]" style="height: auto">
            <el-tree :data="treeData" show-checkbox node-key="id" :props="defaultProps" check-strictly
                :expand-on-click-node='false' check-on-click-node ref="roleTree" @check="handleNodeCheck">
            </el-tree>
        </el-option>
    </el-select>
</template>

<script>
    import {
        distributionListData,
    } from '@/api/produceController'
    export default {
        data() {
            return {
                treeName: [],
                userId:'',
                depId:'',
                defaultId:'',
                treeData: [],
                defaultProps: {
                    children: 'listDown',
                    label: 'name'
                },
                currentKey: {},
                checked: {},
                keys: [],
                checkedKeys: [],
            }
        },
        props: {

        },
        methods: {
            getDistributionListData(data) {
                distributionListData(data).then(res => {
                    if (res.code == 200) {
                        let jsonData = res.data
                        jsonData.forEach(item => {
                            item.node = item.id
                            item.id = item.type + item.id
                            item.listDown.forEach( k => {
                                k.node = k.id
                                k.id = item.node + '' + k.id
                            })
                        })
                        let data = [{
                                id: 0,
                                listDown: [],
                                name: '默认报工权限',
                                type: 'normal',
                                node: 0
                            },
                            {
                                id: -1,
                                listDown: [],
                                name: '所有人',
                                type: 'all',
                                node: -1
                            },
                        ]
                        this.treeData = [...data,...jsonData]
                        if(this.treeData.length){ //设置默认报工权限为默认勾选
                            this.treeName.push('默认报工权限')
                            this.currentKey.id = 0
                            this.selectChange(this.treeName)
                        }
                    }
                })
            },
            //点击复选框和节点
            handleNodeCheck(currentKey, checked) {
                this.checked = checked
                this.currentKey = currentKey
                this.defaultId = '' //每次勾选先置空id
                this.userId = '' //每次勾选先置空id
                this.depId = '' //每次勾选先置空id
                if (currentKey.id == -1 || currentKey.id == 0) {
                    this.defaultId = currentKey.id
                    this.treeName = currentKey.id == 0 ? ['默认报工权限'] : ['所有人']
                    this.$refs.roleTree.setCheckedKeys([currentKey.id])
                } else {
                    let keys = checked.checkedKeys.filter(n =>  n != -1 && n != 0)
                    let arr = [],filterChecked = []
                    checked.checkedNodes.forEach(m => {
                        if (m.id != -1 && m.id != 0) arr = [...arr, m.name]
                    })
                    /**
                     * 当默认--所有人选中与其他节点点击来回切换时只是取消了树节点的勾选状态，此时
                     * checked.checkedNodes中还是包含了默认或者所有人的节点信息，所以当每次点击非
                     * 默认--所有人节点时将其过滤掉
                     */
                    filterChecked = checked.checkedNodes.filter(i => i.type != 'all' && i.type != 'normal')
                    filterChecked.forEach(i => {
                        i.type != 'dep' ? this.userId += i.node + ',' : this.depId += i
                            .node + ','
                    })
                    this.treeName = Array.from(new Set(arr))
                    this.$refs.roleTree.setCheckedKeys(keys)
                }
                this.$emit('emitValue',this.treeName,{distributions:this.defaultId,userId:this.userId,depId:this.depId})
            },
            //treeName改变时改变树结构勾选状态
            selectChange(treeName){
                this.keys = []
                this.userId = ''
                this.depId = ''
                //初始化this.checked为空对象
                Object.keys(this.checked).length && this.checked.checkedNodes.forEach(n => {
                    if (treeName.indexOf(n.name) != -1) this.keys = [...this.keys, n.id]
                })
                if(this.currentKey.id == -1 || this.currentKey.id == 0){
                    this.defaultId = this.currentKey.id
                    this.$refs.roleTree.setCheckedKeys([this.currentKey.id])
                }else{
                    let filterChecked = [],lastChecked = []
                    //先把默认--所有人过滤掉
                    filterChecked = this.checked.checkedNodes.filter(i => i.type != 'all' && i.type != 'normal')
                    //再把this.keys中不包含的id过滤掉
                    lastChecked = filterChecked.filter(i => this.keys.indexOf(i.id) != -1)
                    lastChecked.forEach(i => {
                        i.type != 'dep' ? this.userId += i.node + ',' : this.depId += i
                            .node + ','
                    })
                    this.$refs.roleTree.setCheckedKeys(this.keys)
                }
                this.$emit('emitValue',treeName,{distributions:!treeName.length ? '' : this.defaultId,userId:this.userId,depId:this.depId})
                if (!treeName.length) return this.$refs.roleTree.setCheckedKeys([])
            },
            reset(){
                this.treeName = ['默认报工权限']
                this.currentKey.id = 0
                this.$emit('emitValue',this.treeName,{distributions:0,userId:'',depId:''})
            }
        }
    }
</script>

<style lang="less" scoped>
  
</style>